<template>
  <div class="app-container">
    <div class="wrap_sty_query">
      <div class="cell_sty">
        <span class="label_sty">项目名称</span>
        <el-select v-model="queryParams.pName" placeholder="请选择项目名称" filterable size="mini" style="width: 240px" @change="handleChange">
          <el-option v-for="dict in projectsList" :key="dict.id" :label="dict.pName" :value="dict.id" />
        </el-select>
      </div>
      <!-- <div class="cell_sty">
        <el-button type="primary" size="mini">搜索</el-button>
      </div> -->
    </div>
    <!-- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" size="mini" @change="radiochange">
      <el-radio-button label="left">改造效果时间抽</el-radio-button>
      <el-radio-button label="right">现状历史实景比对</el-radio-button>
    </el-radio-group> -->
    <!-- v-if="tabPosition==='left'" -->
    <div class="timeline">
      <TimeLine v-if="ImageList.length > 0" ref="timeline" :ImageList="ImageList" />
      <el-empty description="暂无数据" v-show="empty"></el-empty>
    </div>
    <div v-if="tabPosition==='right'" class="right_content">
      <div class="before_transformation">
        <span class="label_sty">改造前全景：</span>
        <!-- <el-select v-model="queryParams.name" placeholder="请选择项目名称" clearable size="mini" style="width: 240px">
          <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select> -->
        <div style="width:500px;height:500px;border:1px solid #ccc;margin-top:10px;overflow: hidden;">
          <!-- <Panorama v-if="ImageList.length > 0" ref="panorama" :ImageList="ImageList" /> -->
        </div>
      </div>
      <div class="after_transformation">
        <span class="label_sty">改造后全景：</span>
        <!-- <el-select v-model="queryParams.name" placeholder="请选择项目名称" clearable size="mini" style="width: 240px">
          <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select> -->
        <div style="width:500px;height:500px;border:1px solid #ccc;margin-top:10px;overflow: hidden;">
          <!-- <Panorama /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listProjects } from "@/api/business/project/projects";
import { listProgress } from "@/api/business/project/progress";
import TimeLine from './handle/timeline.vue'
// const Panorama = () => import('../../components/panorama.vue')
export default {
  name: 'transform',
  components: { TimeLine },
  data() {
    return {
      empty: false,
      tabPosition: 'left',
      projectsList: null,
      ImageList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        pName: null,
        pStatus: null,
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getOptions()
    })
  },
  methods: {
    getOptions() {
      listProjects(this.queryParams).then(response => {
        this.projectsList = response.rows;
        this.queryParams.pName = this.projectsList[0].id
        this.getList()
      });
    },
    getList() {
      const params = {
        projectId: this.queryParams.pName,
      }
      listProgress(params).then(respone => {
        // respone.rows.sort((a, b) => new Date(b.createTime).getTime() - new
        //   Date(a.createTime).getTime())
        // console.log(respone.rows)
        if (respone.rows.length) {
          this.empty = false;
          this.ImageList = respone.rows;
          this.$nextTick(() => {
            this.$refs.timeline.init(respone.rows)
          })
        } else {
          this.empty = true;
          this.ImageList = []
        }
      })
    },
    handleChange() {
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.right_content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .before_transformation {
    margin-right: 50px;
  }
}
</style>